<template>
  <div class="chat-container">
    <!-- 聊天头部 -->
    <div class="chat-header">
      <img :src="currentChat.avatar" class="avatar">
      <div class="info">
        <h3 class="name">{{ currentChat.name }}</h3>
        <p class="status">在线</p>
      </div>
    </div>

    <!-- 消息区域 -->
    <div class="messages">
      <div 
        v-for="(msg, index) in messages"
        :key="index"
        :class="['message', { 'own': msg.isOwn }]"
      >
        <div class="content">{{ msg.content }}</div>
        <span class="time">{{ msg.time }}</span>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <el-input
        v-model="newMessage"
        type="textarea"
        :rows="3"
        placeholder="输入消息..."
        @keydown.enter.exact.prevent="sendMessage"
      />
      <el-button type="primary" @click="sendMessage">发送</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const newMessage = ref('')

// 当前聊天信息
const currentChat = computed(() => {
  return {
    id: route.params.chatId,
    name: '张三',
    avatar: '/avatars/1.jpg'
  }
})

// 模拟消息记录
const messages = ref([
  { 
    content: '今晚一起吃饭吗？', 
    time: '10:30', 
    isOwn: false 
  },
  { 
    content: '好啊，去哪吃？', 
    time: '10:31', 
    isOwn: true 
  }
])

// 发送消息
const sendMessage = () => {
  if (!newMessage.value.trim()) return
  
  messages.value.push({
    content: newMessage.value,
    time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
    isOwn: true
  })
  
  newMessage.value = ''
}
</script>

<style scoped>
.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chat-header {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #eee;

  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    margin-right: 12px;
  }

  .name {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .status {
    color: #666;
    font-size: 12px;
  }
}

.messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f8f8f8;

  .message {
    margin-bottom: 15px;
    max-width: 70%;

    &.own {
      margin-left: auto;

      .content {
        background: #95ec69;
      }
    }
  }

  .content {
    background: #fff;
    padding: 10px 15px;
    border-radius: 8px;
    display: inline-block;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  }

  .time {
    display: block;
    color: #999;
    font-size: 12px;
    margin-top: 4px;
  }
}

.input-area {
  border-top: 1px solid #eee;
  padding: 15px;
  background: #fff;
  display: flex;
  gap: 10px;

  :deep(.el-textarea__inner) {
    resize: none;
  }
}
</style>